<template>
  <div class="loginPage">
    <div class="loginBox">
      <img class="logo-title" src="@/assets/logo_title.png" />
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号">
              <i slot="prefix" class="icon"><img src="../../assets/user.png" alt=""></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off">
              <i slot="prefix" class="icon"><img src="../../assets/lock.png" alt=""></i>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox label="记住密码" name="type" v-model="ruleForm.type"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btn" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
import { login, getUserRoleMenus } from "@/api/system";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        type: false,
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      roleId: "",
    };
  },
  mounted() {
    let username = window.localStorage.getItem("username");
    let password = window.localStorage.getItem("password");
    let type = window.localStorage.getItem("type");
    if (username && password) {
      this.ruleForm.username = username;
      this.ruleForm.password = password;
      this.ruleForm.type = type == "true" ? true : false;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let password = md5(md5(this.ruleForm.password) + "bby");
          login({
            password: password,
            username: this.ruleForm.username,
          }).then((res) => {
            if (this.ruleForm.type == true) {
              window.localStorage.setItem("password", this.ruleForm.password);
              window.localStorage.setItem("type", "true");
            } else {
              window.localStorage.removeItem("password");
              window.localStorage.removeItem("type");
            }

            window.localStorage.setItem("username", this.ruleForm.username);
            window.localStorage.setItem("token", res.data.token);
            window.localStorage.setItem("roleId", res.data.roleId);
            this.roleId = res.data.roleId;
            window.localStorage.setItem("userType", res.data.userType);
            window.localStorage.setItem("companyId", res.data.companyId);
            if (this.$route.query && this.$route.query.redirect) {
              this.$router.push({
                path: this.$route.query.redirect,
              });
            } else {
              // this.$router.push({
              //   path: `/system/system/sysPlan`,
              // });
              // 获取用户权限
              this.getAuthority();
            }
          });
        }
      });
    },
    // 获取用户权限
    getAuthority() {
      getUserRoleMenus().then((res) => {
        if (res.code == 200) {
          let datas = res.data;
          let arr = [];
          for (let i of datas) {
            if (i.isCheck == 1) {
              arr.push(i.code);
            }
            for (let j of i.nextMenus) {
              if (j.isCheck == 1) {
                arr.push(j.code);
              }
              for (let k of j.nextMenus) {
                if (k.isCheck == 1) {
                  arr.push(k.code);
                }
                for (let l of k.nextMenus) {
                  if (l.isCheck == 1) {
                    arr.push(l.code);
                  }
                }
              }
            }
          }
          // 缓存权限数组
          window.localStorage.setItem("permissionsArr", JSON.stringify(arr));
          // 延迟跳转首页

          setTimeout(() => {
            if (this.roleId == 6) {
              this.$router.push({
                path: `/filtration/home`,
              });
            } else {
              this.$router.push({
                path: `/home/appIndex`,
              });
            }
          }, 500);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.loginPage {
  background-image: url("../../assets/login_bg.png");
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 800px;
  height: 364px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  width: 36%;
  height: 100%;
  background: #fff;
  line-height: 324px;
}

.logo img {
  width: 200px;
}

.loginBox {
  width: 404px;
  height: 324px;
  background: url("../../assets/login_box.png") no-repeat;
  background-size: 100% 100% !important;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.logo-title {
  margin-top: -150px;
  position: absolute;
}

.title {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
  opacity: 0.88;
  margin-top: 80px;
}

.demo-ruleForm {
  margin-top: 40px;

  .el-input {
    width: 308px;
    height: 40px;
    border-radius: 4px !important;
    color: white !important;
    background-color: #2439d0 !important;
  }
}

.icon {
  width: 22px;
  height: 22px;
  display: block;
  margin-top: 4.5px;
  margin-right: 4px;

  img {
    width: 100%;
    height: 100%;
  }
}

.btn {
  width: 100%;
  background-color: #045ca8;
  border-color: #045ca8;
  border-radius: 20px;
}

.loginTitle {
  width: 336px;
  height: 30px;
  margin-top: 50px;
}
</style>